<template>
  <div class="wrapper">
    <router-link :to="'/assets/cash?status=0'">
      <el-button :type="chooseButton('0')">待审核</el-button>
    </router-link>
    <router-link :to="'/assets/cash?status=1'">
      <el-button :type="chooseButton('1')">审核通过</el-button>
    </router-link>
    <router-link :to="'/assets/cash?status=2'">
      <el-button :type="chooseButton('2')">审核失败</el-button>
    </router-link>
    <el-table v-if="status === '1' || status === '2'" :data="list" :stripe="true" :border="true" :highlight-current-row="true">
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="用户ID" prop="user_id"></el-table-column>
      <el-table-column label="用户名" prop="user_info.name"></el-table-column>
      <el-table-column label="提现金额/元" prop="money" :formatter="minuteFormat"></el-table-column>
      <el-table-column label="账户银行" prop="card_info.name"></el-table-column>
      <el-table-column label="银行卡号" prop="card_info.number"></el-table-column>
      <el-table-column label="状态" prop="status_text"></el-table-column>
      <el-table-column label="创建时间" prop="create_time"></el-table-column>
    </el-table>
    <el-table v-else-if="status !== '1' && status !== '2'" :data="list" :stripe="true" :border="true" :highlight-current-row="true">
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="用户ID" prop="user_id"></el-table-column>
      <el-table-column label="用户名" prop="user_info.name"></el-table-column>
      <el-table-column label="提现金额/元" prop="money" :formatter="minuteFormat"></el-table-column>
      <el-table-column label="账户银行" prop="card_info.name"></el-table-column>
      <el-table-column label="银行卡号" prop="card_info.number"></el-table-column>
      <el-table-column label="状态" prop="status_text"></el-table-column>
      <el-table-column label="创建时间" prop="create_time"></el-table-column>
      <el-table-column label="操作" width="230">
        <template slot-scope="scope">
          <el-button size="small" @click="pass(scope.$index, scope.row)">审核成功</el-button>
          <el-button size="small" @click="fail(scope.$index, scope.row)">审核失败</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next"
        :page-size="pageData.per_page"
        :total="pageData.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import {mapState} from 'vuex'
  import notify from '@/tools/notify'

  export default {
    data () {
      return {}
    },
    created () {
      this.getList()
    },
    computed: {
      ...mapState({
        list: state => state.withdrawcash.list,
        pageData: state => state.withdrawcash.pageData
      }),
      status () {
        // 默认为待审核状态
        if (this.$route.query.status === undefined) {
          return '0'
        }
        return this.$route.query.status
      }
    },
    methods: {
      // 获取提现列表分页数据
      async getList () {
        let payload = {
          page: this.pageData.current_page,
          list_rows: this.pageData.per_page,
          status: this.status
        }
        await this.$store.dispatch('withdrawcash/getList', payload)
      },
      // 点击页面时，跳转到相应页面
      handleCurrentChange (val) {
        this.pageData.current_page = val
        this.getList()
      },
      // 按钮选中时的状态
      chooseButton (val) {
        return val === this.status ? 'success' : ''
      },
      // 审核通过
      pass (index, row) {
        let payload = {
          id: row.id,
          status: 1
        }
        this.$store.dispatch('withdrawcash/auditWithdraw', payload).then(res => {
          this.getList()
          notify.success(res.msg)
        })
      },
      // 审核失败
      fail (index, row) {
        let payload = {
          id: row.id,
          status: 2
        }
        this.$store.dispatch('withdrawcash/auditWithdraw', payload).then(res => {
          this.getList()
          notify.success(res.msg)
        })
      },
      // 把分化为元的操作
      minuteFormat (row, column) {
        return Number(row[column.property] / 100)
      }
    },
    watch: {
      status: function () {
        this.searchData = {}
        this.getList()
      }
    }
  }
</script>
